import { useRequest } from 'umi';
import { StatisticCard, ProCard } from '@ant-design/pro-components';
import moment from 'moment';

const { Statistic } = StatisticCard;

const MyOverview = ({ OverviewData }: any) => {
  console.log(OverviewData);

  return (
    <StatisticCard.Group direction={'row'}>
      <StatisticCard
        statistic={{
          title: '当前阶段',
          value: OverviewData?.nowStage?.stageName,
          description: (
            <Statistic
              title="起止时间"
              value={
                moment(OverviewData?.nowStage?.startTime).format('YYYY-MM-DD') +
                '-至今'
              }
            />
          ),
        }}
      />
      <ProCard.Divider type={'vertical'} />
      <StatisticCard
        statistic={{
          title: '已提交材料个数',
          value: OverviewData?.materialCount,
          suffix: '个',
          description: (
            <Statistic title="较平均水平" value="6.47%" trend="down" />
          ),
        }}
      />
      <ProCard.Divider type={'vertical'} />
      <StatisticCard
        statistic={{
          title: '提交学习计划次数',
          value: OverviewData?.planCount,
          suffix: '次',
          description: (
            <Statistic title="较平均水平" value="3.16%" trend="up" />
          ),
        }}
      />
      <ProCard.Divider type={'vertical'} />
      <StatisticCard
        statistic={{
          title: '材料反馈平均分',
          value: OverviewData?.materialAvgScore,
          precision: 2,
          suffix: '分',
          description: (
            <Statistic title="较平均水平" value="1.28%" trend="up" />
          ),
        }}
      />
    </StatisticCard.Group>
  );
};

export default MyOverview;
